/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row
      :gutter="20"
      style="height: 100%; min-height: 400px; margin-top: 20px"
    >
      <!--用户数据-->
      <el-col>
        <!--工具栏-->
        <div class="head-container">
          <div>
            <!-- 搜索 -->
            <el-input
              v-model="queryData.blurry"
              clearable
              size="small"
              placeholder="输入部门名称"
              style="width: 200px"
              class="filter-item"
              @keyup.enter.native="toQuery"
            />
            <el-date-picker
              v-model="queryData.time"
              type="datetimerange"
              size="small"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
            <el-button size="small" type="primary" icon="el-icon-search"
              >搜索</el-button
            >
            <el-button size="small" type="primary" icon="el-icon-refresh-right"
              >重置</el-button
            >
          </div>
          <el-row style="margin-top: 20px">
            <el-button
              size="small"
              icon="el-icon-plus"
              type="primary"
              @click="add"
              >新增</el-button
            >
            <el-button
              size="small"
              icon="el-icon-delete"
              type="primary"
              >删除</el-button
            >
            <el-button
              size="small"
              icon="el-icon-download"
              type="primary"
              @click="doExport"
              >导出</el-button
            >
          </el-row>
        </div>
        <!--表单渲染-->
        <el-dialog
          append-to-body
          :close-on-click-modal="false"
          :before-close="close"
          :visible.sync="isAdd"
          :title="title"
          width="580px"
        >
        <!-- :rules="rules" -->
          <el-form
            ref="form"
            :inline="true"
            :model="form"
            size="small"
            label-width="80px"
          >
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group
                v-model="form.type"
                size="mini"
                style="width: 178px"
              >
                <el-radio-button label="0">目录</el-radio-button>
                <el-radio-button label="1">菜单</el-radio-button>
                <el-radio-button label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-show="form.type !== '2'"
              label="菜单图标"
              prop="icon"
            >
              <el-popover
                placement="bottom-start"
                width="450"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <!-- <IconSelect ref="iconSelect" @selected="selected" /> -->
                <el-input
                  slot="reference"
                  v-model="form.icon"
                  style="width: 450px"
                  placeholder="点击选择图标"
                  readonly
                >
                  <svg-icon
                    v-if="form.icon"
                    slot="prefix"
                    :icon-class="form.icon"
                    class="el-input__icon"
                    style="height: 32px; width: 16px"
                  />
                  <i
                    v-else
                    slot="prefix"
                    class="el-icon-search el-input__icon"
                  />
                </el-input>
              </el-popover>
            </el-form-item>
            <el-form-item
              v-show="form.type !== '2'"
              label="外链菜单"
              prop="iFrame"
            >
              <el-radio-group v-model="form.iFrame" size="mini">
                <el-radio-button label="true">是</el-radio-button>
                <el-radio-button label="false">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-show="form.type === '1'"
              label="菜单缓存"
              prop="cache"
            >
              <el-radio-group v-model="form.cache" size="mini">
                <el-radio-button label="true">是</el-radio-button>
                <el-radio-button label="false">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-show="form.type !== '2'"
              label="菜单可见"
              prop="hidden"
            >
              <el-radio-group v-model="form.hidden" size="mini">
                <el-radio-button label="false">是</el-radio-button>
                <el-radio-button label="true">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="form.type !== '2'"
              label="菜单标题"
              prop="title"
            >
              <el-input
                v-model="form.title"
                :style="
                  form.type === '0' ? 'width: 450px' : 'width: 178px'
                "
                placeholder="菜单标题"
              />
            </el-form-item>
            <el-form-item
              v-if="form.type === '2'"
              label="按钮名称"
              prop="title"
            >
              <el-input
                v-model="form.title"
                placeholder="按钮名称"
                style="width: 178px"
              />
            </el-form-item>
            <el-form-item
              v-show="form.type !== '0'"
              label="权限标识"
              prop="permission"
            >
              <el-input
                v-model="form.permission"
                :disabled="form.iFrame === 'true'"
                placeholder="权限标识"
                style="width: 178px"
              />
            </el-form-item>
            <el-form-item
              v-if="form.type !== '2'"
              label="路由地址"
              prop="path"
            >
              <el-input
                v-model="form.path"
                placeholder="路由地址"
                style="width: 178px"
              />
            </el-form-item>
            <el-form-item label="菜单排序" prop="menuSort">
              <el-input-number
                v-model.number="form.menuSort"
                :min="0"
                :max="999"
                controls-position="right"
                style="width: 178px"
              />
            </el-form-item>
            <el-form-item
              v-show="
                form.iFrame !== 'true' &&
                form.type === '1'
              "
              label="组件名称"
              prop="componentName"
            >
              <el-input
                v-model="form.componentName"
                style="width: 178px"
                placeholder="匹配组件内Name字段"
              />
            </el-form-item>
            <el-form-item
              v-show="
                form.iFrame !== 'true' &&
                form.type === '1'
              "
              label="组件路径"
              prop="component"
            >
              <el-input
                v-model="form.component"
                style="width: 178px"
                placeholder="组件路径"
              />
            </el-form-item>
            <el-form-item label="上级类目" prop="pid">
              <!-- :load-options="loadMenus" -->
              <treeselect
                v-model="form.pid"
                :options="menus"
                style="width: 450px"
                placeholder="选择上级类目"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text">取消</el-button>
            <el-button
              type="primary"
              >确认</el-button
            >
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table
          ref="table"
          v-loading="loading"
          :data="tableList"
          style="width: 100%"
          height="500px"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column
            :selectable="checkboxT"
            type="selection"
            width="55"
          />
          <el-table-column width="120" prop="username" label="菜单标题" />
          <el-table-column width="80" prop="nickName" label="菜单图标" />
          <el-table-column width="55" prop="gender" label="排序" />
          <el-table-column prop="phone" label="权限标识" />
          <el-table-column prop="desc" label="组件路径" />
          <el-table-column width="55" prop="desc" label="外链" />
          <el-table-column width="55" prop="desc" label="缓存" />
          <el-table-column width="55" prop="desc" label="可见" />
          <el-table-column width="135" prop="desc" label="创建日期" />
          <el-table-column
            label="操作"
            width="115"
            align="center"
            fixed="right"
          >
            <!-- <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.id === user.id"
              />
            </template> -->
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          background
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { doExport } from "@/utils/util.js";
export default {
  name: "user",
  data() {
    return {
      currentPage:1,
      menus: [],
      loading: false,
      title: "",
      form: {
        dept: {
          id: null,
        },
        type:"0"
      },
      // 添加用户
      isAdd: false,
      // 列表数据
      tableList: [],
      // 搜索项数据
      queryData: {
        enabled: [],
        deptName: "",
        createTime: null,
        blurry: null,
        deptId: null,
      },
      enabledTypeOptions: [
        { name: "激活", key: "1" },
        { name: "锁定", key: "2" },
      ],
      // 部门树
      deptDatas: [
        {
          deptName: "沧州市人民政府",
          children: [
            { deptName: "沧州市大数据中心" },
            { deptName: "沧州市外事服务中心" },
            { deptName: "沧州市政府办公室综合事务保障中心" },
            { deptName: "沧州市机关事务保障中心" },
          ],
        },
      ],
      defaultProps: { children: "children", label: "deptName" },
      depts: [],
      // 时间快捷按钮
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    add() {
      this.isAdd = true;
      this.title = "新增菜单";
    },
    // 切换部门
    handleNodeClick(data) {
      if (data.pid === 0) {
        this.queryData.deptId = null;
      } else {
        this.queryData.deptId = data.id;
      }
      this.toQuery();
    },
    checkboxT(row, rowIndex) {
      return row.id !== this.user.id;
    },
    toQuery() {},
    close() {
      this.isAdd = false;
    },
    // 获取左侧部门数据
    getDeptDatas(node, resolve) {
      const sort = "id,desc";
      const params = { sort: sort };
      if (typeof node !== "object") {
        if (node) {
          params["name"] = node;
        }
      } else if (node.level !== 0) {
        params["pid"] = node.data.id;
      }
      setTimeout(() => {
        // getDepts(params).then((res) => {
        //   if (resolve) {
        //     resolve(res.content);
        //   } else {
        //     this.deptDatas = res.content;
        //   }
        // });
      }, 100);
    },
    getDepts() {
      // getDepts({ enabled: true }).then((res) => {
      //   this.depts = res.content.map(function (obj) {
      //     if (obj.hasChildren) {
      //       obj.children = null;
      //     }
      //     if (!obj.hasChildren) {
      //       delete obj.children;
      //     }
      //     return obj;
      //   });
      // });
    },
    // 导出
    doExport() {
      doExport();
    },
    // 获取弹窗内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        // getDepts({ enabled: true, pid: parentNode.id }).then((res) => {
        //   parentNode.children = res.content.map(function (obj) {
        //     if (obj.hasChildren) {
        //       obj.children = null;
        //     }
        //     if (!obj.hasChildren) {
        //       delete obj.children;
        //     }
        //     return obj;
        //   });
        //   setTimeout(() => {
        //     callback();
        //   }, 200);
        // });
      }
    },
    selectionChangeHandler() {},
  },
};
</script>

<style scoped>
</style>

 